import './index.css';
import './img/01.jpeg';
import './img/02.jpeg';
import './img/03.jpeg';
import './img/04.jpeg';
let data = [
    {
        url: './img/01.jpeg',
        title: '1',
        desc: '1',
    },
    {
        url: './img/02.jpeg',
        title: '2',
        desc: '2',
    },
    {
        url: './img/03.jpeg',
        title: '3',
        desc: '3',
    },
    {
        url: './img/04.jpeg',
        title: '4',
        desc: '4',
    },
];

function Slider(ul, dotBox) {
    data.forEach((item, index) => {
        if (index == 0) {
            ul.innerHTML += `<li class="li-active"><img src="${item.url}" /></li>`;
            dotBox.innerHTML += `<span class="dot-active" data-index="${index}"></span>`;
        } else {
            ul.innerHTML += `<li><img src="${item.url}" /></li>`;
            dotBox.innerHTML += `<span data-index="${index}"></span>`;
        }
    });
    this.init();
}

Slider.prototype.init = function () {
    this.ul = document.querySelector('.img-box ul');
    this.arrowLeft = document.querySelector('.arrow-left');
    this.arrowRight = document.querySelector('.arrow-right');
    this.dots = document.querySelectorAll('.dot-box span');
    this.list = document.querySelectorAll('.img-box ul>li');
    this.box = document.querySelector('.box');
    this.index = 0;
    this.lastIndex = 0;
    this.bindEvent();

    this.autoPlay();
};

Slider.prototype.bindEvent = function () {
    this.arrowLeft.addEventListener('click', () => {
        this.index--;
        // this.lastIndex--;
        if (this.index < 0) {
            this.index = this.list.length - 1;
        }
        this.changeActive();
    });
    this.arrowRight.addEventListener('click', () => {
        this.index++;
        // this.lastIndex++;
        if (this.index > this.list.length - 1) {
            this.index = 0;
        }
        this.changeActive();
    });
    //点击小圆点切换图片
    this.dots.forEach((item, index) => {
        item.addEventListener('click', () => {
            this.index = index;
            this.changeActive();
        });
    });

    //鼠标移入停止自动播放
    this.box.addEventListener('mouseenter', () => {
        clearInterval(this.timer);
    });
    this.box.addEventListener('mouseleave', () => {
        this.autoPlay();
    });

    document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') {
            clearInterval(this.timer);
        } else {
            this.autoPlay();
        }
    });
};
Slider.prototype.changeActive = function () {
    const list = document.querySelectorAll('.img-box ul>li');
    const dots = document.querySelectorAll('.dot-box span');
    list[this.lastIndex].classList.remove('li-active');
    dots[this.lastIndex].classList.remove('dot-active');
    list[this.index].classList.add('li-active');
    dots[this.index].classList.add('dot-active');
    this.lastIndex = this.index;
};

//自动播放
Slider.prototype.autoPlay = function () {
    this.timer = setInterval(() => {
        this.index++;
        if (this.index > this.list.length - 1) {
            this.index = 0;
        }
        this.changeActive();
    }, 2000);
};
let ul = document.querySelector('ul');
let dotBox = document.querySelector('.dot-box');
new Slider(ul, dotBox);
